<!DOCTYPE html>
<?php
require_once 'classes/google.php';
$person = $_GET['person'];
$google = new Google();
?>

<html>
	<head>
		<title>Giftful</title>
		<link rel="stylesheet" href="css/styles.css" type="text/css">
		<!--JS Link-->
		<!-- include the Tools -->
		<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
		<script type="text/javascript" src="js/script.js"></script>
	</head>
	<body>
		<!--Striped Pattern-->
		<div id="stripesLine"></div>
		<!--Orange Stripe-->
		<div id="orangeStripe"></div>
		<!-- content -->
		<div id="content">
			<a href="pickFriend.php"><div id="labelSmall"></div></a>
			<div id="upperText">
				Your gift recommendations!
			</div>
			<div id="left">
				<div id="titleGiftList">
					<a href="#">My Gift List</a>
				</div>
				<div class="separator"></div>
				<div id="giftList">
					something
				</div>
			</div>
			<div id="right">
				<?php
				$array = $google -> search_item('boots', 'christmas');
				$count = 10;

				foreach ($array as $n => $v) {
					echo '<div class="giftItem">
					<img class="giftImage" src="' . $v["url"] . '" rel="#photo' . $count . '"/>
					<a class="addGift" href="#"><img src="images/plus.png" title="Add gift to my list."/></a>
                    </div>';
					echo '<div class="apple_overlay" id="photo' . $count . '">
				<img src="' . $v["url"] . ' " />
				<div class="details">
					<h3>' . $v["name"] . '</h3>
                    <h4>Description</h4>
                    <p>
                        ' . $v["description"] . '
                        </p>
                        <p> Price: $' . $v["price"] . '</p>
                        <p> Shipping Cost: $' . $v["shipping"] . '</p>
                        <p> Availability: ';

					if (strcmp('inStock', $v['availability']) == 0)
						echo 'In Stock';
					else
						echo 'Out of Stock';
					echo '<h4>Rate this item:</h4>
							<input type="range" name="test" min="1" max="5" value="3" />
				</div>
             </div>';

					$count += 1;

				}
				?>
			</div>
		</div>
		<!-- make all links with the 'rel' attribute open overlays -->
		<script>
			$(function() {
				$("#right img[rel]").overlay({
					effect : 'apple'
				});
			});

			$(":range").rangeinput();

		</script>
	</body>
</html>
